<template>
  <div class="vaw-header-layout">
    <div class="logo-wrapper">
      <Logo :always-show="true" />
    </div>
    <div class="menu-wrapper">
      <ScrollerMenu :routes="permissionStore.getTopLevelTabs" mode="horizontal" @top-item-click="onTopItemClick" />
    </div>
    <a-card class="right-wrapper" :body-style="{ padding: 0, height: '100%' }" :header-style="{ padding: 0 }"
      :bordered="false">
      <div class="flex justify-end items-center h-full">
        <template v-if="appStore.deviceType !== 'mobile'">
          <ActionItems />
        </template>
        <div class="avatar-wrapper">
          <VAWavatar />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import useAppConfigStore from '@/store/modules/app-config'
import usePermissionStore from '@/store/modules/permission'
import { defineComponent } from 'vue'
import { RouteRecordRaw, useRouter } from 'vue-router'
export default defineComponent({
  name: 'VAWHeader',
  setup() {
    const router = useRouter()
    const appStore = useAppConfigStore()
    const permissionStore = usePermissionStore()
    function handlePath(routes: RouteRecordRaw[]) {
      for (let index = 0; index < routes.length; index++) {
        const it = routes[index]
        if (it.children && it.children.length > 0) {
          handlePath(it.children)
        } else {
          router.push(it.path)
        }
        break
      }
    }
    function onTopItemClick(key: string) {
      handlePath(permissionStore.getTopLevelTabs.find((it) => it.path === key)?.items || [])
    }
    return {
      permissionStore,
      appStore,
      onTopItemClick,
    }
  },
})
</script>

<style scoped lang="less">
.vaw-header-layout {
  background: var(--right-top-bg) ;
  color: var(--right-top-color) ;
  height: @logoHeight;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border);

  .logo-wrapper {
    width: @menuWidth;
  }

  .menu-wrapper {
    flex: 1;
    overflow: hidden;
    color: var(--right-top-color) ;

    :deep(.arco-menu-horizontal) {
      height: 47px;
      width: 100%;
      background-color: transparent;
    }

    :deep(.arco-menu-horizontal .arco-menu-inner) {
      overflow: hidden;
      padding: 9px 10px 8px 10px;
      background: transparent;
      color: var(--right-top-color) ;
    }

    :deep(.arco-menu-horizontal .arco-menu-inner .arco-menu-item) {
      overflow: hidden;
      padding: 9px 10px 8px 10px;
      background: transparent ;
      color: var(--right-top-color) ;

      &:hover {
        background: var(--left-hover-bg) ;
      }
    }

    :deep(.arco-menu-pop-header) {
      background-color: transparent ;
      color: var(--right-top-color) ;
      padding: 9px 10px 8px 10px
    }

    :deep(.arco-menu-selected-label) {
      bottom: 0px;
      height: 2px;
    }

    // 菜单图标颜色
    :deep(.arco-menu-icon svg) {
      color: var(--right-top-color);
    }

    // 菜单箭头颜色
    :deep(.arco-menu-icon-suffix svg) {
      color: var(--right-top-color);
    }

    // 选中的菜单字体颜色
    :deep(.arco-menu-item.arco-menu-selected) {
      color: rgb(var(--primary-6)) !important;
      background-color: var(--left-select-bg);

      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;

        & .arco-icon {
          color: currentColor;
        }
      }
    }

    // 鼠标悬停的菜单字体颜色
    :deep(.arco-menu-item:hover, .arco-menu-dark .arco-menu-group-title:hover, .arco-menu-dark .arco-menu-pop-header:hover, .arco-menu-dark .arco-menu-inline-header:hover) {
      color: rgb(var(--primary-6)) !important;
      background-color: var(--left-hover-bg);

      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;

        & .arco-icon {
          color: currentColor;
        }
      }
    }

    // 菜单悬停字体颜色
    :deep(.arco-menu-inline-header:hover) {
      color: rgb(var(--primary-6)) !important;
      background-color: var(--left-hover-bg);

      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;

        & .arco-icon {
          color: currentColor;
        }
      }
    }

    // 菜单悬停字体颜色
    :deep(.arco-menu-pop-header:hover) {
      color: rgb(var(--primary-6)) !important ;
      background-color: var(--left-hover-bg) ;

      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important ;

        & .arco-icon {
          color: currentColor ;
        }
      }
    }
  }

  .right-wrapper {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: transparent;
    color: var(--right-top-color) ;

    :deep(.arco-card-body) {
      color: var(--right-top-color) ;
    }

    :deep(.arco-breadcrumb-item) {
      color: var(--right-top-color) ;
    }

    .avatar-wrapper {
      padding-right: 15px;
      margin-left: 10px;
    }
  }
}
</style>
